<template>
  <div id="measureControl">
    <el-row type="flex" class="measure-btns">
      <el-button type="primary" class="measure" @click.stop.prevent="measureCtrl('polygon')">
        <span class="measuretext">面积测量</span>
      </el-button>
      <el-button type="primary" class="measure" @click.stop.prevent="measureCtrl('lineString')">
        <span class="measuretext">距离测量</span>
      </el-button>
    </el-row>
  </div>
</template>
<script>
import ol from 'ol/index'
export default {
  name: 'measureControl',
  props: {
    map: {
      type: Object,
      required: true
    }
  },
  methods: {
    measureCtrl (measureType) {
      const measure = new ol.control.Measure({
        className: 'ol-unselectable ol-control',
        target: this.map.getTargetElement(),
        features: [],
        unit: 'px'
      })
      measure.set('type', measureType)
      this.map.addControl(measure) // 添加测量控件
      measure.on('measureend', (event) => {
        const feature = event.feature
        const geom = feature.getGeometry()
        const output = document.getElementById('output')
        output.innerHTML = `${measureType} 长度: ${geom.getLength().toFixed(2)}`
      })
    }
  }
}

</script>
<style scoped  lang="less">
  #measureControl {
    position: absolute;
    z-index: 9999;
    left: calc(100% - 220px);
    top: 70px;

    .measure {
    position: relative;
    width: 80px;
    height: 10px;
    text-align: center;
    background-color: rgba(25, 1, 1, 0.5);
    border: 0px;
    :hover {
      background-color: rgba(243, 243, 8, 0.511);
    }
  }
  .measuretext {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  }

</style>
